<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>#t1 { color: red }</style>
<div id="t1">Should be green.</div>
<script>
    test(() => {
        // Triggers synch active stylesheet update.
        var sheet = document.styleSheets[0];
        // Clears the previous RuleSet for rebuild.
        sheet.insertRule("#dummy {}", 0);
        // No Ruleset recreated since media does not match.
        sheet.media.mediaText = "nomatch";
        var newStyle = document.createElement("style");
        newStyle.appendChild(document.createTextNode("div { color: green }"));
        // New sheet triggers active stylesheet update and style recalc for #t1.
        document.head.appendChild(newStyle);
    }, "Check that appending a stylesheet while clearing the RuleSet of an existing sheet does not crash");

    test(() => assert_equals(getComputedStyle(t1).color, "rgb(0, 128, 0)"),
        "Check that the #t1 rule no longer applies.");
</script>
